<template>
    <header class="head-nav">

        <div class="logo-container">
            <img src="../assets/logo.png" class="logo">
            <span class="title">大白后台管理系统</span>
        </div>
        <div class="user">
            <el-upload class="avatar-uploader" action="http://127.0.0.1:8080/userinfo/editAva" :show-file-list="false"
                :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess">
                <img :src="getpath(user.avatar)" class="avatar">
            </el-upload>
            <div class="welcome">
                <p class="name comename">欢迎</p>
                <p class="name avatarname">{{ user.name }}</p>
            </div>
            <div class="username">
                <el-dropdown trigger="click" style="cursor:pointer">
                    <i class="el-icon-arrow-down el-icon--right"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="infoshow">个人信息</el-dropdown-item>
                        <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>

    </header>
</template>

<script>
export default {
    data() {
        return {
            file: ''
        }
    },
    computed: {
        user() {
            return this.$store.getters.user
        }
    },
    methods: {
        logout() {
            this.$store.commit('logout')
            this.$router.push('/login')
        },
        infoshow() {
            this.$router.push('/infoshow')
        },
        getpath(path) {
            return path ? require('../../../servlet/head_img/' + path) : '';//path不为null就返回对应的路径
        },
        handleAvatarSuccess(res, file) {
            let fd = new FormData();
            fd.append("file", this.file);
            // 上传文件接口
            this.$axios.post('http://127.0.0.1:8080/userinfo/editAva', fd, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then((res) => {
                if (res.status == 200) {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    })
                    location.reload()
                }
            });
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            //给文件赋值
            this.file = file
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }

            return isJPG && isLt2M;
        }
    }
}
</script>

<style scoped>
.head-nav {
    min-width: 600px;
    padding: 10px 5px;
    background-color: #324057;
    color: #fff;
    border-bottom: 1px solid #1f2d3d;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo {
    height: 50px;
    width: 50px;
    margin-right: 5px;
}

.title {
    font-size: 22px;
    font-family: "Microsoft YaHei";
    letter-spacing: 3px;
}

.user {
    display: flex;
    align-items: center;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.welcome {
    margin: 5px;
    line-height: 8px;
}

.comename {
    font-size: 14px;
    text-align: center;
    color: #fff;
}

.avatarname {
    font-size: 14px;
    color: #409eff;
    font-weight: bold;
}

.el-dropdown {
    color: #fff;
}
</style>